<template>
	<div id="seckill">
		<!---------限量秒杀------------>
		<div class="seckill_1">
			<div class="seckill_title">
	  			<div class="title_l">
	  				<p><span></span>限量秒杀</p>
	  				<p>每天都有惊喜</p>
	  			</div>
	  		</div>
	  		<div class="seckill_1_list">
	  			<div v-for="item in taskList.slice(0,25)" class="task_item">
					<div class="task_img">
						<div class="shade"></div>
		  				<div class="goods_img">
		  					<img src="../../static/img/imgLoading.png"/>
		  					<div class="img_box">
		  						<img :src="item.Img"/>
		  					</div>
		  				</div>
					</div>
	  				<div class="task_title">
	  					<img :src="item.platform"/>
	  					<p>{{item.title}}</p>
	  				</div>
					<div class="price">
						<p>¥{{item.price}}</p>
						<p>已有人{{item.people}}申请</p>
					</div>
					<input type="button" value="免费试用" />
	  			</div>
	  		</div>
		</div>
		<!-----------推荐好货----------->
		<div class="seckill_2">
			<div class="seckill_title">
				<div class="title_l">
	  				<p><span></span>推荐好货</p>
	  				<p>每天都有惊喜！</p>
	  			</div>
  				<ul class="title_r">
  					<li @mousemove="recommend(1)" :class="recommend_num == '1'?'recommend_active':''"></li>
  					<li @mousemove="recommend(2)" :class="recommend_num == '2'?'recommend_active':''"></li>
  				</ul>
			</div>
			<div class="recommend_list">
				<div id="recommend_1" class="recommend_item">
					<div v-for="item in taskList.slice(0,5)" class="task_item">
						<div class="task_img">
							<div class="shade"></div>
							<img :src="item.Img"/>
						</div>
		  				<div class="task_title">
		  					<img :src="item.platform"/>
		  					<p>{{item.title}}</p>
		  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<p>已有人{{item.people}}申请</p>
						</div>
						<input type="button" value="免费试用" />
		  			</div>
				</div>
				<div id="recommend_2" class="recommend_item">
					<div v-for="item in taskList.slice(0,5)" class="task_item">
						<div class="task_img">
							<div class="shade"></div>
							<img :src="item.Img"/>
						</div>
		  				<div class="task_title">
		  					<img :src="item.platform"/>
		  					<p>{{item.title}}</p>
		  				</div>
						<div class="price">
							<p>¥{{item.price}}</p>
							<p>已有人{{item.people}}申请</p>
						</div>
						<input type="button" value="免费试用" />
		  			</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'seckill',
	data: function(){
		return{
			recommend_num:1,
			taskList:[
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		    ]
		}
	},
	methods:{
		recommend:function(n){
			this.recommend_num = n;
			if(n == '2'){
				document.querySelector('#recommend_1').style.marginLeft = '-1230px';
				document.querySelector('#recommend_2').style.marginRight = '0';
			}else{
				document.querySelector('#recommend_1').style.marginLeft = '0';
				document.querySelector('#recommend_2').style.marginRight = '-1230px';
			}
		},
	},
	created:function(){
		if(this.$route.query.taskName){
			this.taskName = this.$route.query.taskName
		}
	}
}
</script>

<style scoped>
/*-------限量秒杀-------*/
.seckill_1{
	width: 1230px;
	margin: 0 auto;
	margin-top: 20px;
}
.seckill_1_list{
	display: flex;
	flex-wrap: wrap;
}
.seckill_1_list .task_item:nth-child(5n){
	margin-right: 0;
}
/*-----------推荐好货列表-------------*/
.seckill_2{
	width: 1230px;
	margin: 0 auto;
	margin-bottom: 30px;
}
.recommend_list{
	display: flex;
	overflow: hidden;
}
.recommend_item{
	display: flex;
}
.recommend_item .task_item{
	margin-bottom: 0;
}
.recommend_item .task_item:last-child{
	margin-right: 0;
}
#recommend_1{
	transition: 0.8s;
}
#recommend_2{
	transition: 0.8s;
	margin-right: -1230px;
}
/*---------标题---------*/
.seckill_title{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 10px;
	margin-bottom: 10px;
}
.title_l{
	display: flex;
	align-items: flex-end;
}
.title_l p:first-child{
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
}
.title_l p:first-child span{
	width: 3px;
	height: 14px;
	background-color: #4D4D4D;
	margin-right: 5px;
}
.title_l p:last-child{
	color: #9F9F9F;
	height: 17px;
	margin-left: 10px;
}
.title_r{
	display: flex;
}
.title_r li{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #DDDDDD;
	margin-left: 10px;
	cursor: pointer;
}
.title_r li.recommend_active{
	background-color: #FF464E;
}
.title_r p{
	font-weight: bold;
	color: #FF464E;
	font-size: 16px;
}
.title_r p span{
	color: #4D4D4D;
}
/*----------单个任务-------------*/
.task_item{
	width: 238px;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid transparent;
	cursor: pointer;
}
.task_item:hover{
	border: 1px solid #FF464E;
}
.task_item:hover .shade{
	display: block;
}
.task_img{
	position: relative;
}
.task_img .shade{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.2);
	display: none;
}
.task_img img{
	width: 100%;
	display: block;
}
.goods_img{
	position: relative;
	width: 100%;
}
.goods_img>img{
	width: 100%;
	display: block;
}
.goods_img .img_box{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.goods_img .img_box img{
	width: 100%;
	display: block;
}
.task_title{
	margin-top: 5px;
	display: flex;
	align-items: flex-end;
}
.task_title img{
	display: block;
	height: 20px;
	margin-right: 5px;
}
.task_title p{
	width: calc(100% - 25px);
	height: 20px;
	line-height: 28px;
	color: #5E5E5E;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.price p:first-child{
	color: #FF464E;
	text-decoration: line-through;
}
.price p:last-child{
	color: #5E5E5E;
}
.task_item input{
	margin-top: 10px;
	border: 1px solid #FF464E;
	color: #FF464E;
	width: 100%;
	height: 30px;
	background-color: #fff;
	border-radius: 3px;
	font-size: 14px;
}
</style>